<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			ul,
			ol {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			ul {
				width: 500px;
				height: 26px;
			}
			ul li {
				float: left;
				height: 26px;
				padding: 0 16px;
				cursor: pointer;
			}
			ol {
				width: 488px;
				padding: 6px;
				background: #abcdef;
			}
			.hide {
				display: none;
			}
			.show {
				display: block;
			}
			.normal {
				color: black;
				background: #ddd;
				border: 1px solid #abcdef;
				border-bottom: 0;
			}
			.hover {
				color: #fff;
				background: #abcdef;
				border: 1px solid #abcdef;
				border-bottom: 0;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("ol li:gt(0)").addClass("hide");
				$("ul li").click(function(){
					$("ol li").eq($(this).index()).removeClass("hide").addClass("show").siblings().removeClass("show").addClass("hide");					
				});
			})
		</script>
	</head>
	<body>
		<div id="tab">
			<ul>
				<li>tab1</li>
				<li>tab2</li>
				<li>tab3</li>
			</ul>
			<ol>
				<li><img src="img/1.jpg" /></li>
				<li><img src="img/2.jpg" /></li>
				<li><img src="img/3.jpg" /></li>
			</ol>
		</div>
	</body>
</html>